<template>
    <view :style="themeColor()" class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden">
        <view v-if="!loading">
            <view :style="{ 'background': 'url(' + img('addon/shop_fenxiao/index/header_bg.png') + ') left top / 100% 100% no-repeat' }">
                <!-- #ifdef MP-WEIXIN || APP-PLUS -->
                <top-tabbar :data="param" class="top-header" :scrollBool="topTabarObj.getScrollBool()" />
                <!-- #endif -->
                <view class="h-[320rpx] box-border px-[var(--sidebar-m)] pt-[44rpx] flex flex-col justify-between">
                    <view class="flex items-center">
                        <view class="!w-[100rpx] !h-[100rpx] rounded-full flex-shrink-0 overflow-hidden">
                            <u-avatar v-if="info?.headimg" :default-url="img('static/resource/images/default_headimg.png')" :src="img(info?.headimg)" size="100rpx" leftIcon="none" />
                            <u-avatar v-else :src="img('static/resource/images/default_headimg.png')" size="100rpx" leftIcon="none" />
                        </view>
                        <view class="flex flex-col text-[#303133] ml-[32rpx]">
                            <view class="text-[30rpx] font-500 leading-[1.4] truncate max-w-[520rpx]">{{ info?.username }}</view>
                            <view class="text-[24rpx] text-[var(--text-color-light6)] mt-[20rpx]" v-if="info?.parent_member">上级：{{ info?.parent_member?.username }}</view>
                        </view>
                    </view>
                    <view class="flex items-center h-[140rpx] box-border rounded-[var(--rounded-big)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)]"
                        :style="{backgroundImage: 'url(' + img('addon/shop_fenxiao/index/head_bg.png') + ') ',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'cover'}"
                        @click="redirect({ url: '/app/pages/member/range_level' })">
                        <view class="flex flex-col">
                            <view class="flex items-center">
                                <image class="w-[30rpx] h-[30rpx] mr-[10rpx]" :src="img('addon/shop_fenxiao/info_vip.png')" mode="widthFix" />
                                <text class="text-[30rpx] truncate w-[320rpx] font-500 text-[#FDD6A1]">{{ info?.fenxiao_level?.level_name || '等级未解锁' }}</text>
                            </view>
                            <text class="text-[26rpx] text-[#E8D3B6] mt-[16rpx]">发展团队可提升等级</text>
                        </view>
                        <text class="ml-auto level-wrap w-[120rpx] h-[54rpx] text-center rounded-[54rpx] text-[22rpx] flex-center text-[#794200]">去升级</text>
                    </view>
                </view>
            </view>

            <view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[30rpx]">
                <view class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
                    <text class="text-[30rpx] font-500">{{ t('billingInformation') }}</text>
                    <view v-if="btnShow" class="text-[var(--text-color-light6)] text-[26rpx]" @click="redirect({ url: '/app/pages/member/available_detail', param: { type: '3' } })">
                        <text>佣金明细</text>
                        <text class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[24rpx]"></text>
                    </view>
                </view>
                <view class="flex justify-between pt-[30rpx] px-[24rpx] items-center border-0">
                    <text class="text-[30rpx] font-500">{{ teamInfo?.grandTotal || '0.00' }}</text>
                    <view class="text-[var(--text-color-light6)] text-[26rpx]">
                        <text>累计佣金</text>
                    </view>
                </view>
            </view>

            <view class="flex gap-[20rpx] sidebar-margin">
                <view class="flex px-[30rpx] rounded-[var(--rounded-big)] items-center flex-1 h-[150rpx] team-bg"
                    @click.stop="redirect({ url: '/app/pages/member/range_team' })">
                    <image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/team1.png')" mode="widthFix" />
                    <view class="flex-1 flex flex-col">
                        <text class="text-[28rpx]">我的团队</text>
                        <text class="text-[var(--text-color-light6)] text-[24rpx] mt-[20rpx]">({{ teamInfo?.memberNum || 0 }}/{{ teamInfo?.memberAllNum || 0 }})人</text>
                    </view>
                </view>
                <view class="flex px-[30rpx] rounded-[var(--rounded-big)] items-center flex-1 h-[150rpx] team-bg">
                    <image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/team2.png')" mode="widthFix" />
                    <view class="flex-1 flex flex-col">
                        <text class="text-[28rpx]">团队业绩</text>
                        <text class="text-[var(--text-color-light6)] text-[24rpx] mt-[20rpx]">{{ info?.total_team_consume || 0 }}元</text>
                    </view>
                </view>
            </view>
            
            <view class="flex gap-[20rpx] sidebar-margin mt-[var(--top-m)]">
                <view class="flex px-[30rpx] rounded-[var(--rounded-big)] items-center flex-1 h-[150rpx] team-bg">
                    <image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/team2.png')" mode="widthFix" />
                    <view class="flex-1 flex flex-col">
                        <text class="text-[28rpx]">大区业绩</text>
                        <text class="text-[var(--text-color-light6)] text-[24rpx] mt-[20rpx]">{{ teamInfo?.big_area || 0 }}元</text>
                    </view>
                </view>
                <view class="flex px-[30rpx] rounded-[var(--rounded-big)] items-center flex-1 h-[150rpx] team-bg">
                    <image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/team2.png')" mode="widthFix" />
                    <view class="flex-1 flex flex-col">
                        <text class="text-[28rpx]">小区业绩</text>
                        <text class="text-[var(--text-color-light6)] text-[24rpx] mt-[20rpx]">{{ teamInfo?.small_area || 0 }}元</text>
                    </view>
                </view>
            </view>

            <view class="commission-bg pb-[35rpx] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)]">
                <view class="py-[30rpx] px-[24rpx] border-0 border-b-[2rpx] border-solid border-[#f6f6f6] text-[30rpx] font-500">常用功能</view>
                <view class="flex flex-wrap common-module pt-[7rpx]">
                    <view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="redirect({ url: '/app/pages/member/range_promote' })">
                        <image class="w-[66rpx] h-[66rpx]" :src="img('addon/shop_fenxiao/index/code.png')" mode="widthFix" />
                        <view class="flex flex-col items-center mt-[16rpx]">
                            <text class="text-[26rpx]">邀请好友</text>
                            <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">邀好友赚好礼</text>
                        </view>
                    </view>
                    <view class="flex items-center flex-col w-[33.3%] py-[23rpx]" @click="redirect({ url: '/app/pages/member/range_order' })">
                        <image class="w-[66rpx] h-[66rpx]" :src="img('addon/shop_fenxiao/index/order.png')" mode="widthFix" />
                        <view class="flex flex-col items-center mt-[16rpx]">
                            <text class="text-[26rpx]">团队订单</text>
                            <text class="text-[22rpx] text-[var(--text-color-light9)] mt-[12rpx]">团队订单明细</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <loading-page :loading="loading" />
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import useMemberStore from '@/stores/member'
import { img, redirect } from '@/utils/common';
import { getGrandTotal } from "@/app/api/member";
import { t } from '@/locale';
import { topTabar } from '@/utils/topTabbar'
const memberStore = useMemberStore()

const topTabarObj = topTabar()
const param = ref(topTabarObj.setTopTabbarParam({ title: '团队绩效奖励', topStatusBar: { textColor: '#333' } }))

const teamInfo: Record<string, any> = ref({}) // 团队信息
const loading = ref<boolean>(true);

//个人信息
const info = computed(() => {
    return memberStore.info;
})

const btnShow = computed(() => {
    return memberStore.buttonAuth.range_point || false;
})

const getInfo = () => {
    loading.value = true
    getGrandTotal({
        points_type: 2, // 可用积分
        type: 3 // 3团队绩效奖励
    }).then((res: any) => {
        teamInfo.value = res.data
    })
    .finally(() => {
        loading.value = false
    })
}

getInfo();
</script>

<style lang="scss" scoped>
.level-wrap {
    background: linear-gradient(90deg, #FDE4C0, #FDC274);
}

.commission-bg {
    background: #FFFFFF;
}

.team-bg {
    background: linear-gradient(135deg, #FFF9F9 10%, #FFFFFF 40%, #FFFFFF 100%);
}

.common-module > view {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        width: 2rpx;
        height: 80rpx;
        background-color: var(--temp-bg);
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    &:nth-child(3n+1)::after {
        width: 0;
        height: 0;
    }
}
</style>
